<template>
  <div class="list">
    <tmpHeader :index='7'/>
    <div class="main">
        <div class="iheader">
            <Button type="info" @click="add" class="buttonbox">
                <i class = "iconfont icon-add" style="font-size:14px;margin-right:5px"></i>
            </Button>
        </div>   
        <div class="tabList">
            <Table stripe :columns="columns1" :data="list"></Table>
        </div>
        <Modal v-model="modalStatus" :title="`${['新增', '编辑'][type]}远程门诊类型`" :footer="null">
            <div class="model">
                <p class="title">基本信息</p>
                <div class="user">
                    <span><i style="color:red">*</i> 门诊名称：</span>
                    <input type="text" placeholder="请输入远程门诊类型名称" v-model.trim="params.name" maxlength="10">
                </div>
                <div class="user">
                    <span>门诊价格：</span>
                    <!-- <InputNumber :min='0' :max='9999' v-model.number="params.cost"></InputNumber> -->
                    <input min="0" max="999" v-model="params.cost" type="number" @input="srInput" class="inputnumber" />
                </div>
            </div>
            <div slot="footer" class="btn-group">
                <Button type="primary" @click="Save('formInline')" style="width:75px;height:35px;">
                    <Icon type="ios-checkmark" style="margin-right: 5px" />提交
                </Button>
                <Button @click="modalStatus=false" style="width:75px;height:35px;">
                    <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>取消
                </Button>		
            </div>		
        </Modal>
    </div>
  </div>
</template>
<script>
import tmpHeader from "@/pages/organizat/contentmen/tmpHeader";
import api from "@/api/commonApi";
export default {
  components: {
    tmpHeader
  },
  data() {
    return {
      type: '', // '0'新增 '1' 编辑
      modalStatus:false,
      params: {
        name: "",
        cost: "",
        id: ""
      },
      list: [],
      id: sessionStorage.getItem("hospitalId"),
      columns1:[
        {
          key:"isum",
          title:"排序",
          align:"center",
        },
        {
          key:"name",
          title:"名称",
          align:"center"
        },
        {
          key:"cost",
          title:"医事服务费价格（元）",
          align:"center"
        },
        {
          title:"设置",
          align:'center',
          render:(h,params) => {
            return h('a', {
              on: {
                click: () => {
                  this.edit(params.row)
                }
              }
            }, '编辑')
          }
        }
      ]
    };
  },
  created(){
    let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/operation/mechanism/index",
                title: "机构运营"
            },
            {
                path: "/index/operation/home",
                title: "机构配置管理"
            }
        ];
        this.$emit("changeBreadList", breadList);
  },
  mounted() {
    let doctor = localStorage.getItem("doctor");
    if (!doctor) {
      this.$Message.info("您还没有开通远程门诊,去开通");
      localStorage.setItem("homeIndex", 0);
      setTimeout(() => {
        this.functionJS.paramsNavgationTo(this, "homeinfo");
        // 公用方法
      }, 800);
    }
    this.getDataDoctorList();
  },
  methods: {
    //  新增
    add() {
      this.modalStatus = true;
      this.type = '0';
    },
    //  编辑
    edit(item) {
      this.type = '1';
      this.modalStatus = true;
      this.params.id = item.id;
      this.$axios.post(api.findRemoteOutpatientTypeById, {id: this.params.id}).then(res => {
        if (res.data.success) {
            this.params.name = res.data.object.name;
            this.params.cost = res.data.object.cost;
        }
    });
    },
    srInput(e) {
      this.params.cost = e.target.value.match(/^\d*(\.?\d{0,2})/g)[0] || null;
      if(e.target.value>999.99)this.params.cost=999.99
    },
    // 修改成功
    Save() {
      if(!this.params.name){
        this.$Message.error("请完整填写必填项");
        return;
      }
      let params = this.params;
      let message = '成功'
      if(Boolean(params.id)) {
            message = '修改成功'
        } else {
            params.id = null;
            message = '添加成功'
        }
        params.hospitalId = this.id;
        this.$axios.post(api.saveOperateRemoteOutpatientType, params).then(res => {
            if (res.data.code) {
              this.modalStatus = false;
              this.$Message.info(message);
              this.getDataDoctorList();
            } else {
              this.$Message.error(res.data.message);
            }
        });
    },
    // 加载门诊列表
    getDataDoctorList() {
      this.$axios
        .post(api.findRemoteOutpatientTypeList, {
          hospitalId: this.id
        })
        .then(res => {
          if (res.data.code) {
            let ret = res.data.object;
            ret.forEach((item,index) => {
              item.isum = this.addZeros(index)
            })
            this.list = ret;
          }
        });
    }
  },
  watch: {
    modalStatus(n) {
      if (!n) {
        this.params.name = "";
        this.params.cost = "";
        this.params.id = '';
      }
    }
  }
};
</script>
<style lang="less" scoped>
.list {
  width: calc(100%);
  padding: 10px 30px;
  margin: 0 auto;
  background: #fff;
  .main {
    width: 90%;
    margin: 0 auto;
    .iheader {
        width: 100%;
        margin: 10px auto;
        .buttonbox{
            background-color: #21c780;
            border: 1px solid#21c780;
        }       
    }
    .tabList {
      width: 100%;
      margin: 0 auto;
    }
  }
}
.model {
    width: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    margin: 10px auto;
    border: 1px solid #f0f0f0;
    box-shadow: 0 4px 3px #ebedf8;
    border-radius: 5px;
    margin-bottom: 20px;
    .title {
        font-size: 20px;
        padding-left: 15px;
        margin-bottom: 20px;
        color: #333;
        height: 40px;
        line-height: 40px;
        background: #ebedf8;         
    }
    .user {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin: 10px 20px;
        span {
            width: 70px;
        }
        input {
            text-indent: 10px;
            width: 75%;
            border-radius: 5px;
            line-height: 30px;
            border: 1px solid #ddd;
            outline: none;
        }
        .inputnumber {
            width: 150px;
            background: #fff;
            border: none;
            outline: none;
            text-indent: 10px;
            line-height: 30px;
            border: 1px solid #ddd;
            border-radius: 4px;
            color: #666;
        }
        .inputnumber:focus{
          border-color:#5362e1
        }
    }
}
.btn-group{
    width: 100%;
    text-align:center;
}
</style>
